<template>
	<view class="out">
		<view class="comment">
			<input type="text" 
				placeholder="请输入热梗..." 
				v-model="iptValue" 
				@confirm="publish"
			>
			<button size="mini" type="primary" 
				:disabled="iptValue.length < 3"
				@click="publish"
				>发布</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	
	const emit = defineEmits(["publish"])
	
	const iptValue = ref("")
	
	function publish(){
		emit("publish",iptValue.value)
		iptValue.value = ''
	}
</script>

<style lang="scss" scoped>
	.out {
		width: 90vw;
		margin: 15px auto;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		padding: 15px;
		box-sizing: border-box;

		.comment {
			display: flex;
			margin-top: 10px;

			input {
				flex: 4;
				background: #f4f4f4;
				margin-right: 5px;
				height: 100%;
				height: 32px;
				border-radius: 4px;
				padding: 0 10px;
				color: #333;
			}

			button {
				flex: 1;
			}
		}
	}
</style>